<!DOCTYPE html>
<!-- ======================================================================= -->
<!--                       s n a p s h o t s . h t m l                       -->
<!-- ======================================================================= -->
<html lang="en">
    <head>
        <title>Audiveris - Snapshots</title>
        <script>context = {page: "Snapshots", root: "../../"};</script>

        <meta name="author" content="Hervé Bitteur" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="icon" href="../../branding/images/audiveris-icons-256.ico" type="image/x-icon" />

        <script src="https://java.com/js/deployJava.js"></script>
        
        <link rel="stylesheet" href="../../branding/css/slideshow.css"/>
        <link rel="stylesheet" href="../../branding/css/global.css"/>
        <link rel="stylesheet" href="../../branding/css/top-nav.css"/>
        <style type="text/css">
            /*<![CDATA[*/
            .main {
                width: 100%;
            }

            /* Legend */
            #two-legends {                
                text-align: center;
            } 
            .legend {
                display: inline-block;
                width: 222px;
                border: 1px solid lightgray;
                border-top-left-radius:  60px 60px;
                border-top-right-radius: 60px 60px;
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
                overflow: hidden;
                text-align: center;
                background-color: #eeeeee;
            }
            .legend p {
                display: inline-block;
                width: 80px;
                margin: 5px;
                text-align: center;
            } 

            /* Status */
            #slideshow #status {
                position: absolute;
                top: 30px;
                left: 50%;
                margin-left: 320px;
                font-family: fantasy;
                font-weight: bold;
                color: coral;
            }

            /* Container for slides */
            #slideshow {
                margin-bottom: 100px;
            }
            #slideshow ul.labels {
                top: 0;
                width: 100%;
            }
            #slideshow ul.labels li.active a {
                background-color:#030878;
            }
            #slideshow ul.slides {
                top: 30px;
                height: 409px;
                width:785px;
                margin-left: auto;
                margin-right: auto;
            }
            /*]]>*/
        </style>
    </head>
    <body>
        <script src="../../branding/js/header.js"></script> 

        <div class="main">
            <span id="top"></span>

            <h1>Snapshots</h1>

            <div id="two-legends">
                <div class="legend">
                    <p>Picture tab</p>
                </div>
                <div class="legend">
                    <p>Data tab</p>
                </div>
            </div>

            <div id="slideshow">
                <ul class="tabs labels">
                    <li><a href="#">Physical</a></li><!--
                    --><li><a href="#">Combined</a></li><!--
                    --><li><a href="#">Logical</a></li>

                    <li><a href="#">Physical</a></li><!--
                    --><li><a href="#">Combined</a></li><!--
                    --><li><a href="#">Logical</a></li>
                </ul>

                <!-- Status -->
                <div id="status">PAUSED</div>

                <ul class="slides">
                    <li><img src="../images/main-picture-input.png" title="Picture physical"/></li>
                    <li><img src="../images/main-picture-both.png" title="Picture combined"/></li>
                    <li><img src="../images/main-picture-output.png" title="Picture logical"/></li>
                    <li><img src="../images/main-data-input.png" title="Data physical"/></li>
                    <li><img src="../images/main-data-both.png" title="Data combined"/></li>
                    <li><img src="../images/main-data-output.png" title="Data logical"/></li>
                </ul>

                <!-- Previous / Next commands -->
                <a class="command previous"></a>
                <a class="command next"></a>

            </div>

            <script src="../../branding/js/footer.js"></script> 
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="../../branding/js/slideshow.js"></script>
        <script>
            // Customization
            slideshow.period = 4000;   // in ms
            slideshow.fading = 800;    // in ms
            slideshow.ease = "swing";  // "linear" or "swing"
        </script>
    </body>
</html>
